<template>
  <div class="header">
    <div class="PCheader">
      <i class="iconfont iconcaidan leftmenuNav" @click="showMenu"></i>
      <index-logo class="Logo"></index-logo>
      <!-- 小屏幕的头部 -->
      <div class="mobileRight">
        <div v-if="!isLogin" class="login">
          <button class="needLogin" @click="GoLogin">
            <i class="iconfont icondenglu"></i> 登录
          </button>
        </div>
        <div v-if="isLogin">
          <img :src="img" alt />
        </div>
      </div>
      <ul class="right">
        <div style="position:relative;">
          <li class="searchInput" v-show="ifrouter">
            <input type="text" placeholder="请输入你要搜索的内容" v-model="searchText" @input="searchBlog" @focus="startSearch"
              @blur="endSearch" />
            <i @click="search"  class="iconfont iconsousuo"></i>
          </li>
            <transition name="search">
              <search class="searchB" @clickSearchItemForBlog="useSearchItem" :searchMsg="searchMsg" v-if="ifSearch"></search>
            </transition>
        </div>
        <li @click="GoIndex" :class="{'active':routerActive===1}">
          <i class="iconfont iconshouye1"></i>
          <span>首页</span>
        </li>
        <!-- <li @click="GoMessage" :class="{'active':routerActive===2}">
          <i class="iconfont iconliuyan"></i>
          <span>留言</span>
        </li> -->
        <!-- <li @click="chatMe" :class="{'active':routerActive===3}">
          <i class="iconfont iconlianxi1"></i>
          <span>联系我</span>
        </li> -->
        <!-- <li @click="chatRoom" :class="{'active':routerActive===4}">
          <i class="iconfont icontianchongxing-"></i>
          <span>聊天</span>
        </li> -->
        <!-- <li @click="Myfriend" :class="{'active':routerActive===5}">
          <i class="iconfont iconpengyou"></i>
          <span>朋友</span>
        </li> -->
        <!-- <li @click="Me" :class="{'active':routerActive===6}">
          <i class="iconfont icondenglu"></i>
          <span>博主</span>
        </li> -->
        <!-- <li @click="Mine" v-if="$store.getters.user.username" :class="{'active':routerActive===7}">
          <i class="iconfont iconwo"></i>
          <span>我的</span>
        </li> -->

        <li v-if="!isLogin">
          <button class="needLogin" @click="GoLogin">
            <i class="iconfont icondenglu"></i> 登录
          </button>
        </li>
        <li class="userInfo" v-if="isLogin" @click="showChangeUser">
          <img :src="img" alt />
          {{realname}}
        </li>
      </ul>
      <!-- //左边的菜单 -->
      <div class="leftHeader" :class="{leftMenu:isShowLeftHeader}">
        <input type="text" placeholder="请输入你要搜索的内容" v-model="searchText" v-show="ifrouter" @input="searchBlog"
          @focus="startSearch" @blur="endSearch" />
        <button @click="search" v-show="ifrouter" style="vertical-align:middle">搜索</button>
        <div class="userInfo" @click="showChangeUser" v-if="isLogin">
          <img :src="img" alt />
          <p>{{realname}}</p>
        </div>
        <!-- <div v-if="!isLogin">
          <button class="needLogin" @click="GoLogin">
            <i class="iconfont icondenglu"></i> 登录
          </button>
        </div>
        <div class="index" @click="GoIndex">
          <i class="iconfont iconshouye1"></i>
          <span>首页</span>
        </div>
        <div class="Message" @click="GoMessage">
          <i class="iconfont iconliuyan"></i>
          <span>留言</span>
        </div>
        <div class="CallMe" @click="chatMe">
          <i class="iconfont iconlianxi1"></i>
          <span>联系我</span>
        </div>
        <div class="friend" @click="Myfriend">
          <i class="iconfont iconpengyou"></i>
          <span>朋友</span>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import indexLogo from "../../components/IndexLogo";
  import Bus from "../../bus";
  import search from "../../components/search";
  import {
    state
  } from "../../store.js";
  export default {
    components: {
      indexLogo,
      search
    },
    data() {
      return {
        slowSearch:true,
        searchText: "",
        content: [],
        //分页查询
        pageno: 1, //页数
        pagesize: 7, //每页大小
        isShowLeftHeader: false, //是否显示左侧菜单栏
        ifSearch: false, //是否显示下拉框
      };
    },
    mounted() {
      this.getCurrentItem();
    },
    computed: {
      searchMsg(){
        console.log(this.content)
        return this.content.length?this.content:[{title:"没有数据"}]
      },
      routerActive() {
        let activeIndex
        switch (this.$route.path) {
          case '/index':
            activeIndex = 1;
            break;
          case '/message':
            activeIndex = 2;
            break;
          case '/chat':
            activeIndex = 3;
            break;
          case '/chatRoom':
            activeIndex = 4;
            break;
          case '/friend':
            activeIndex = 5;
            break;
          case '/me':
            activeIndex = 6;
            break;
          case '/mine':
            activeIndex = 7;
            break;
          default:
            activeIndex = 1;
            break;
        }
        console.log(activeIndex)
        return activeIndex
      },
      ifrouter() {
        return this.$route.path === "/index";
      },
      realname() {
        return this.$store.getters.user.realname;
      },
      img() {
        return this.$store.getters.user.avatar;
      },
      isLogin() {
        return state.isLogin;
      },
    },
    methods: {
      startSearch() {

        this.ifSearch = true;
      },
      endSearch() {
        setTimeout(() => {
          this.ifSearch = false;
        },100);
      },
      chatRoom() {
        if (this.$route.path === '/chatRoom') {
          this.isShowLeftHeader = false;
          return;
        } else {
          this.$router.push("/chatRoom")
          this.isShowLeftHeader = false;
        }
      },
      Mine() {
        if (this.$route.path === '/mine') {
          this.isShowLeftHeader = false;

          return;
        } else {
          this.$router.push("/mine");
          this.isShowLeftHeader = false;
        }
      },
      Me() {
        if (this.$route.path === "/me") {
          this.isShowLeftHeader = false;

          return;
        } else {
          this.$router.push("/me");
          this.isShowLeftHeader = false;
        }
      },
      Myfriend() {
        if (this.$route.path === "/friend") {
          this.isShowLeftHeader = false;

          return;
        } else {
          this.$router.push("/friend");
          this.isShowLeftHeader = false;
        }
      },
      chatMe() {
        if (this.$route.path === "/chat") {
          this.isShowLeftHeader = false;

          return;
        } else {
          this.$router.push("/chat");
          this.isShowLeftHeader = false;
        }
      },
      GoMessage() {
        if (this.$route.path === "/message") {
          this.isShowLeftHeader = false;
          return;
        } else {
          this.$router.push("/message");
          this.isShowLeftHeader = false;
        }
      },
      GoIndex() {
        if (this.$route.path === "/index") {
          this.isShowLeftHeader = false;
          return;
        } else {
          this.$router.push("/index");
          this.isShowLeftHeader = false;
        }
      },
      showMenu() {
        this.isShowLeftHeader = !this.isShowLeftHeader;
      },
      showChangeUser() {
        this.$emit("showChangeUser");
      },
      GoLogin() {
        this.$router.push("/login");
      },
      useSearchItem(mes) {
        console.log(mes);
        
          this.searchText = mes;
      },
      //获取前7的的博客
      getCurrentItem() {
        Bus.$on("searchSevenContent", (msg) => {
          console.log("获取前7博客列表")
          console.log(msg);
          this.content = msg;
        });
      },
      // endSearch() {
      //   this.$emit("endSearch");
      // },
      searchBlog() {
        // if (this.searchText !== "") {
          if(!this.slowSearch){
            return
          }
            this.slowSearch = false
        this.$axios
          .get("/blog/list", {
            params: {
              status: this.$store.getters.user.status,
              title: this.searchText,
              pageno: this.pageno,
              pagesize: this.pagesize,
            },
          })
          .then((res) => {
              this.slowSearch = true
            if (res.data.error === 0) {
              this.content = []
            } else {
              this.content = res.data.data;
            }
          });
      },
      search() {
        if (this.searchText !== "") {
          this.$axios
            .get("/blog/list", {
              params: {
                status: this.$store.getters.user.status,
                title: this.searchText,
              },
            })
            .then((res) => {
              if (res.data.error === 0) {
                Bus.$emit("search", null);
              } else {
                console.log(res)
                Bus.$emit("search", res.data.data);
                // this.content=res.data.data
              }
            });
        } else {
          Bus.$emit("search", "");
        }
      },
    },
    beforeDestroy() {
      Bus.$off("clickSearchItemForBlog");
      Bus.$off("searchSevenContent");
    },
  };
</script>

<style lang="less" scoped>
  @import url("../../css/comment/animate.css");
  @import url("../../css/mobile/mvheader.less");
  @import url("../../css/pc/header.less");

  .leftMenu {
    left: 0;
    animation: rightMove 0.3s ease-in-out;
  }

  @keyframes rightMove {
    0% {
      left: -40%;
    }

    100% {
      left: 0;
    }
  }

  @font-face {
    font-family: "advice";
    src: url("../../assets/font/advice (2).woff");
    src: url("../../assets/font/advice (2).woff") format("woff");
  }

  @font-face {
    font-family: "advice1";
    src: url("../../assets/font/2fa9c4ff5312d3b187d6c29ebec5a1f2.woff");
    src: url("../../assets/font/2fa9c4ff5312d3b187d6c29ebec5a1f2.woff") format("woff");
  }

  span {
    font-family: "advice", "advice1";
  }

  .searchB {
    position: absolute;
    left: 15px;
  }

  .search-enter,
  .search-leave-to {
    opacity: 0;
    transform: translateY(-300px);
  }

  .search-enter-active,
  .search-leave-active {
    transition: all 0.5s;
  }
</style>